<%@page import="com.shuang.common.JspProoertyParamsUtil"%>
<%@page import="java.util.List"%>
<%@page import="com.shuang.common.JspKVUtil"%>
<%@page import="com.shuang.common.JspJsonUtil"%>
<%@page import="com.google.gson.JsonParser"%>
<%@page import="com.shuang.pojo.ExtendDbGoods"%>
<%@page import="com.google.gson.Gson"%>
<%@page import="com.google.gson.JsonArray"%>
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE HTML>
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>${goodsInfo.gTitle}</title>
	<link rel="stylesheet" href="../css/commodity.css">
	<link rel="stylesheet" href="../css/demo.css">
	<link rel="stylesheet"  href="../css/component.css">
	<link rel="stylesheet" href="../css/content.css">
	<script src="../js/modernizr.js"></script>
	<script src="../js/classie.js"></script>
	<script src="../js/uiMorphingButton_fixed.js"></script>
	<script src="../js/login.js"></script>
	<script src="../js/jquery-1.js"></script>
	<script src="../js/loginregister.js"></script>
</head>
<body>
	<div class="wrap">
		<div class="logo">
		<!--头部-->
			<!-- <a href=""><img src="../images/dota2_logn.png" alt="DOTA2饰品交易中心"></a>
			<div class="login">
			start
				<div class="morph-button morph-button-modal morph-button-modal-2 morph-button-fixed">
					<button type="button" id="login_b" class="login_box">登录</button>
					<div class="morph-content">
						<div>
							<div class="content-style-form content-style-form-1">
								<span class="icon icon-close">×</span>
								<h2>会员登录</h2>
								<form action="" method="post" id="denglu">
									<p><label>用户名：</label><input placeholder="请输入用户名" id="login_name" type="text"></p>
									<p><label>密码：</label><input placeholder="请输入登录密码" id="login_pass" value="" type="password"></p>
									<p><label>验证码：</label><input id="code" placeholder="请输入验证码" type="text"><img src="../images/code.png" alt="" id="code_img" onclick="this.src='/index.php/home/Index/code/'+Math.random()" style="margin-left:40px;width:150px;height:45px;cursor:pointer;"><span id="code_info" style="font-size:15px;margin-left:20px;color:red"></span>
									</p>
									<p><input value="登录" id="login_t" class="login_btn" type="button"></p>
									<div><a href="">忘记密码?</a></div>
								</form>
							</div>
						</div>
					</div>
				</div>
				<div class="morph-button morph-button-modal morph-button-modal-3 morph-button-fixed">
					<button type="button" id="login_b" class="register">注册</button>
					<div class="morph-content">
						<div>
							<div class="content-style-form content-style-form-2">
								<span class="icon icon-close">×</span>
								<h2>会员注册</h2>
								<form id="zuce">
									<p>
										<label class="p1">用户名：</label>
										<input placeholder="请输入用户名" class="reg reg_name" name="用户名" type="text">
										<span>*请输入5到20位字符的账户</span>
									</p>

									<p>
										<label class="p1">密码：</label>
											<input placeholder="请输入密码" class="reg" name="密码" type="password">
											<span>*请输入7到20位字符的密码，必须包含数字、字母</span>
									</p>

									<p>
										<label class="p1">邮箱：</label>
										<input placeholder="请输入邮箱" class="reg" name="邮箱" type="text">
										<span>*请输入正确的邮箱</span>
									</p>

									<p>
										<label class="p1">DOTA2&nbsp;ID：</label>
										<input placeholder="请输入DOTA2ID" class="reg" name="DOTA2ID" type="text">
										<span>*请输入正确的DOTA2ID以保交易正常</span>
									</p>

									<p>
										<label class="p1">密钥：</label>
										<input placeholder="请输入密钥" class="reg" name="密钥" type="text">
										<span>*请输入5到20位字符密钥可以是数字、字母、一段话（用于密码找回，请牢记）</span>
									</p>

									<p>
										<label class="p1">验证码：</label>
										<input id="code" placeholder="请输入验证码" style="width:180px" class="reg" name="验证码" type="text">
										<img src="../images/code.png" alt="" style="margin-left:25px;cursor:pointer;" onclick="this.src='/index.php/home/Index/code/'+Math.random()" id="reg_img">
										<span class="reg_code" style="line-height:45px"></span>
									</p>
									<p><input value="提交注册" id="login_t" class="zuce_btn" type="button"></p>
								</form>
							</div>
						</div>
					</div>
				</div> -->
			<!-- end -->
			</div>
		</div>
		<!--头部end-->
		<div class="bodyer">
			<div class="container">
			<!--主体内容-->
			<div class="site">
			<!-- 位置 -->
				<div class="home_icon">
						<a href=""><img src="../images/home_icon.png" alt=""></a>
					</div>
					<div class="triangle"></div>
					<div class="site_sp">
						<a href="">饰品市场</a>
					</div>
					<div class="triangle1"></div>
					<div class="site_ss">
						饰品详情
					</div>
			<!-- 位置end -->
			</div>
			<div class="commodity_main">
				<div class="commodity">
				<!-- 商品详情 -->
					<div class="commodity_b">
						<div class="commodity_img">
							<div class="commodity_div" name="2"> </div>
							<img src=" ${goodsInfo.gMainImage}"  alt="${goodsInfo.gTitle}" >
						</div>
					</div>
					<div class="commodity_detail">
						<div class="detail_top">
							<div class="detail_name">
							<h4 title="${goodsInfo.gTitle}">${goodsInfo.gTitle}</h4>
							<div style="color: red;">${goodsInfo.gSellPoint}${goodsInfo.gSellPoint}</div>
							</div>
						</div>
						<div class="detail_mid">
						<table class="commodity_rarity" style="width: 100%;">
						<%
						Gson gson1=new Gson();
						JsonParser parser1 = new JsonParser();
						JsonArray Jarray1 = parser1.parse(((ExtendDbGoods)request.getAttribute("goodsInfo")).getPropertyData()).getAsJsonArray();
						%>
						
						<%
								for(int i=0;i<Jarray1.size();i++){
									JspProoertyParamsUtil prooertyParams= gson1.fromJson(Jarray1.get(i), JspProoertyParamsUtil.class);
									%>
									
									<tr>
									<td><%=prooertyParams.getProperty() %>：</td>
									<td>
									<%
									String[] strArray=prooertyParams.getParams().split(",");
									for(int j=0;j<strArray.length;j++){
										%>
										<span style="border: 1px solid black; padding: 2px"><%=strArray[j] %></span>
										<%
									}
									%>
									</td>
									</tr>
									<%
								}
						%>
							
							<tr>
								<td>饰品单价：</td>
								<td><div class="detail_price">${goodsInfo.gPrice/100}&nbsp;元</div></td>
							</tr>
						</table>
						</div>
						<!-- <div class="commodity_rarity"> -->
								
							<!-- <div class="goods_hero" style="width: 100%;">
								所属英雄：<span>潮汐猎人</span>
							</div>
							<div class="goods_hero">
								饰品单价：<div class="detail_price">555,880&nbsp;P豆</div>数量：
							</div> -->
							<!-- <div class="clearfix">
								<div class="detail_dj">饰品单价：</div>
								<div class="detail_price">555,880&nbsp;P豆</div>
							</div> -->
					<!-- 	</div> -->
						<div class="detail_bottom">
							<div class="sl">数量：</div>
							<div class="detail_num">
								<div class="minus">-</div>
								<input value="1" id="detail_nums" onkeyup="this.value=this.value.replace(/\D/g,'')" type="text">
								<div class="add">+</div>
							</div>
							<div class="kc" name="1">(库存：<span id="kc_nums">${goodsInfo.gnum }</span>件)</div>
						</div>
						<div class="btn_hid">
							<div class="detail_gm">立即购买</div>
							<div class="detail_gwc" data-reveal-id="myModal">加入购物车</div>
						</div>
						<!-- <div id="myModal" class="reveal-modal">
						<div class="pop_up">
							<div class="gmsp">购买饰品</div>
							<div class="pop_title">
								<img src="../images/gw.png" alt=""><div>已成功加入购物车</div>
							</div>
							<div class="pop_shop">
								<div class="pop_shop_title">
									<ul>
										<li class="pop_shop_title1">饰品名称</li>
										<li class="pop_shop_title2">单价</li>
										<li class="pop_shop_title2">数量</li>
										<li class="pop_shop_title2">合计</li>
									</ul>
								</div>
								<div class="pop_shop_detail">
									<div class="pop_shop_img det">
										<img src="../images/thimb.png" alt="">
										<span>远古</span>
									</div>
									<div class="pop_shop_name det">
										渄淬之刃
									</div>
									<div class="pop_shop_price det" name="555880">
										555,880
										<span>&nbsp;P豆</span>
									</div>
									<div class="pop_shop_num det">
										1件
									</div>
									<div class="pop_shop_all det">
										5,700&nbsp;P豆
									</div>
								</div>
								<div class="pop_btn">
									<div class="pop_btn1">
										<span class="close-reveal-modal">继续购物</span>
									</div>
									<div class="pop_btn2">
										<a href="http://yangzm.cc/index.php/home/cart/index">去购物车结账</a>
									</div>
								</div>
							</div>
							</div>
						</div> -->
					
					</div>
				<!-- 商品详情end -->
				</div>
				<div class="commodity_hot">
				<!-- 热销产品 -->
					<div class="commodity_hot_bar">
						<div>
							<img src="../images/sign.png" alt="">
							<span>热销产品</span>
						</div>
					</div>
					<div class="commodity_hot_detail">
												<div class="shop_hot_item">
							<div class="item_img">
								<a href=""><img src="../images/thimb.png" alt=""></a>
								<span class="bx">不朽</span>
							</div>
							<div class="shop_hot_dota">
								<div class="shop_hot_dota1">
									<div class="shop_hot_title">
										<a href=""><span class="hot_title1">铭刻 放逐之晶</span></a>
										<img src="../images/Dota-1.png" alt="">
									</div>
								</div>
								<div class="shop_hot_dota2">
									<div class="shop_hot_sj">
										售价：<span>140,003</span>
									</div>
									<div class="shop_hot_sc">
										销量：5&nbsp;件
									</div>
								</div>
							</div>
						</div>
												<div class="shop_hot_item">
							<div class="item_img">
								<a href=""><img src="../images/thimb.png" alt=""></a>
								<span class="bx">传说</span>
							</div>
							<div class="shop_hot_dota">
								<div class="shop_hot_dota1">
									<div class="shop_hot_title">
										<a href=""><span class="hot_title1">玉角羊</span></a>
										<img src="../images/Dota-1.png" alt="">
									</div>
								</div>
								<div class="shop_hot_dota2">
									<div class="shop_hot_sj">
										售价：<span>620</span>
									</div>
									<div class="shop_hot_sc">
										销量：4&nbsp;件
									</div>
								</div>
							</div>
						</div>
												<div class="shop_hot_item">
							<div class="item_img">
								<a href=""><img src="../images/thimb.png" alt=""></a>
								<span class="bx">神话</span>
							</div>
							<div class="shop_hot_dota">
								<div class="shop_hot_dota1">
									<div class="shop_hot_title">
										<a href=""><span class="hot_title1">铭刻 凤凰守卫</span></a>
										<img src="../images/Dota-1.png" alt="">
									</div>
								</div>
								<div class="shop_hot_dota2">
									<div class="shop_hot_sj">
										售价：<span>700</span>
									</div>
									<div class="shop_hot_sc">
										销量：4&nbsp;件
									</div>
								</div>
							</div>
						</div>
												<div class="shop_hot_item">
							<div class="item_img">
								<a href=""><img src="../images/thimb.png" alt=""></a>
								<span class="bx">神话</span>
							</div>
							<div class="shop_hot_dota">
								<div class="shop_hot_dota1">
									<div class="shop_hot_title">
										<a href=""><span class="hot_title1">铭刻 凤凰守卫</span></a>
										<img src="../images/Dota-1.png" alt="">
									</div>
								</div>
								<div class="shop_hot_dota2">
									<div class="shop_hot_sj">
										售价：<span>700</span>
									</div>
									<div class="shop_hot_sc">
										销量：4&nbsp;件
									</div>
								</div>
							</div>
						</div>
												<div class="shop_hot_item">
							<div class="item_img">
								<a href=""><img src="../images/thimb.png" alt=""></a>
								<span class="bx">稀有</span>
							</div>
							<div class="shop_hot_dota">
								<div class="shop_hot_dota1">
									<div class="shop_hot_title">
										<a href=""><span class="hot_title1">天木梭载入画面</span></a>
										<img src="../images/Dota-1.png" alt="">
									</div>
								</div>
								<div class="shop_hot_dota2">
									<div class="shop_hot_sj">
										售价：<span>66</span>
									</div>
									<div class="shop_hot_sc">
										销量：4&nbsp;件
									</div>
								</div>
							</div>
						</div>
												<div class="shop_hot_item">
							<div class="item_img">
								<a href=""><img src="../images/thimb.png" alt=""></a>
								<span class="bx">稀有</span>
							</div>
							<div class="shop_hot_dota">
								<div class="shop_hot_dota1">
									<div class="shop_hot_title">
										<a href=""><span class="hot_title1">天木梭载入画面</span></a>
										<img src="../images/Dota-1.png" alt="">
									</div>
								</div>
								<div class="shop_hot_dota2">
									<div class="shop_hot_sj">
										售价：<span>66</span>
									</div>
									<div class="shop_hot_sc">
										销量：4&nbsp;件
									</div>
								</div>
							</div>
						</div>
												<div class="shop_hot_item">
							<div class="item_img">
								<a href=""><img src="../images/thimb.png" alt=""></a>
								<span class="bx">稀有</span>
							</div>
							<div class="shop_hot_dota">
								<div class="shop_hot_dota1">
									<div class="shop_hot_title">
										<a href=""><span class="hot_title1">沙丘之蚀君主长尾</span></a>
										<img src="../images/Dota-1.png" alt="">
									</div>
								</div>
								<div class="shop_hot_dota2">
									<div class="shop_hot_sj">
										售价：<span>1,699</span>
									</div>
									<div class="shop_hot_sc">
										销量：4&nbsp;件
									</div>
								</div>
							</div>
						</div>
												<div class="shop_hot_item">
							<div class="item_img">
								<a href=""><img src="../images/thimb.png" alt=""></a>
								<span class="bx">罕见</span>
							</div>
							<div class="shop_hot_dota">
								<div class="shop_hot_dota1">
									<div class="shop_hot_title">
										<a href=""><span class="hot_title1">无常君王披风</span></a>
										<img src="../images/Dota-1.png" alt="">
									</div>
								</div>
								<div class="shop_hot_dota2">
									<div class="shop_hot_sj">
										售价：<span>1,650</span>
									</div>
									<div class="shop_hot_sc">
										销量：3&nbsp;件
									</div>
								</div>
							</div>
						</div>
											</div>
				<!-- 热销产品end		 -->
				</div>
				<div class="commodity_news">
				<!-- 新品推荐 -->
					<div class="commodity_news_bar">
						<ul class="commodity_news_bar_ul">
							<!--这里用ajax就好-->
							<!-- <li><span class="commodity_news_list_show">新品推荐</span></li> -->
							<li><span class="show_more">商品详情</span></li>
							<li><span class="pinglun_show">用户评论</span></li>
							
						</ul>
					</div>
	<!-- 				<div class="commodity_news_list">
						<div class="commodity_news_list_iteam">
							<div class="commodity_news_img">
								<a href=""><img src="../images/thimb.png" alt=""></a>
								<span>普通</span>
							</div>
							<div class="commodity_news_dota">
								<div class="commodity_news_name">
									<a href="">Veil of Pagus Loading Screen</a>
									<img src="../images/Dota-1.png" alt="">
								</div>
								<div class="commodity_news_price">
									<div class="commodity_news_price_left">
										售价：<span>888</span>
									</div>
									
									<div class="commodity_news_price_right">
										13月前
									</div>
									
								</div>
							</div>
						</div>
						<div class="commodity_news_list_iteam">
						<div class="commodity_news_img">
							<a href=""><img src="../images/thimb.png" alt=""></a>
							<span>神话</span>
						</div>
						<div class="commodity_news_dota">
							<div class="commodity_news_name">
								<a href="">监工之负</a>
								<img src="../images/Dota-1.png" alt="">
							</div>
							<div class="commodity_news_price">
								<div class="commodity_news_price_left">
									售价：<span>5,000</span>
								</div>

								<div class="commodity_news_price_right">
									13月前
								</div>

							</div>
						</div>
						</div>

						<div class="commodity_news_list_iteam">
							<div class="commodity_news_img">
								<a href=""><img src="../images/thimb.png" alt=""></a>
								<span>罕见</span>
							</div>
							<div class="commodity_news_dota">
								<div class="commodity_news_name">
									<a href="">塔林钩刃</a>
									<img src="../images/Dota-1.png" alt="">
								</div>
								<div class="commodity_news_price">
									<div class="commodity_news_price_left">
										售价：<span>120</span>
									</div>
									
									<div class="commodity_news_price_right">
										13月前
									</div>
									
								</div>
							</div>
						</div>

						<div class="commodity_news_list_iteam">
							<div class="commodity_news_img">
								<a href=""><img src="../images/thimb.png" alt=""></a>
								<span>不朽</span>
							</div>
							<div class="commodity_news_dota">
								<div class="commodity_news_name">
									<a href="">纯金斩巫碎颅锤 - 副手</a>
									<img src="../images/Dota-1.png" alt="">
								</div>
								<div class="commodity_news_price">
									<div class="commodity_news_price_left">
										售价：<span>528,899</span>
									</div>
									
									<div class="commodity_news_price_right">
										13月前
									</div>
									
								</div>
							</div>
						</div>

						<div class="commodity_news_list_iteam">
							<div class="commodity_news_img">
								<a href=""><img src="../images/thimb.png" alt=""></a>
								<span>不朽</span>
							</div>
							<div class="commodity_news_dota">
								<div class="commodity_news_name">
									<a href="">铭刻 放逐之晶</a>
									<img src="../images/Dota-1.png" alt="">
								</div>
								<div class="commodity_news_price">
									<div class="commodity_news_price_left">
										售价：<span>140,003</span>
									</div>
									
									<div class="commodity_news_price_right">
										13月前
									</div>
									
								</div>
							</div>
						</div>

						<div class="commodity_news_list_iteam">
							<div class="commodity_news_img">
								<a href=""><img src="../images/thimb.png" alt=""></a>
								<span>稀有</span>
							</div>
							<div class="commodity_news_dota">
								<div class="commodity_news_name">
									<a href="">天木梭载入画面</a>
									<img src="../images/Dota-1.png" alt="">
								</div>
								<div class="commodity_news_price">
									<div class="commodity_news_price_left">
										售价：<span>66</span>
									</div>
									
									<div class="commodity_news_price_right">
										13月前
									</div>
									
								</div>
							</div>
						</div>
					</div> -->
					<div class="goods" style="margin:10px 0px;background: white;overflow: hidden;">
					<%
					Gson gson=new Gson();
					JsonParser parser = new JsonParser();
					JsonArray Jarray = parser.parse(((ExtendDbGoods)request.getAttribute("goodsInfo")).getFormatData()).getAsJsonArray();
					%>
					<table border='1' cellspacing="0" cellpadding="0"  bgcolor="#2E3238"  bordercolor="black" style="width: 100%;text-align: center;border: 10px solid black;color: white; ">
						<%
						for(int i=0;i<Jarray.size();i++){
							%>
								<tr>
								<th colspan="2" ><%=gson.fromJson(Jarray.get(i),JspJsonUtil.class).getGroup()%></th>
								</tr>
							<%
							JspKVUtil[]	formatparams=gson.fromJson(Jarray.get(i),JspJsonUtil.class).getParams();
							for(int j=0;j<formatparams.length;j++){
								%>
								<tr>
								<td><%=formatparams[j].getK() %></td>
								<td><%=formatparams[j].getV() %></td>
								</tr>
								<%
							}
						}
						%>
					</table>
						${goodsInfo.describeData}
					</div>
					<div class="pinglun" style="display: none">
						<ul>
							<li>xxxxxxxxx</li>
							<li>xxxxxxxxx</li>
							<li>xxxxxxxxx</li>
							<li>xxxxxxxxx</li>
						</ul>
						<div class="rec_bg" style="margin: 10px 20px; border: 2px black solid; text-align: center;"><a style="color: gray;">>>>更多</a></div>
					</div>
					

				<!-- 新品推荐end -->
				</div>
			</div>
			<!--主题内容end-->
			</div>
			<!-- boyder end -->
		</div>
		<div class="footer">
			<div class="footer_container">
				<p>
					<a href="index.html">首页</a><b>|</b>
					<a href="">关于我们</a><b>|</b>
					<a href="">意见反馈</a><b>|</b>
					<a href="">商务合作</a>
				</p>
			</div>
		</div>
		<div class="nav">
			<div class="shopper">
				<a href="">
					<span><img src="../images/shopper.png" alt=""></span>
					<div class="shopper_gw">购物车</div>
				</a>
					<div class="shopper_nums"></div>
				
				<a href="" id="shopper_bb_a">
					<div class="shopper_bb">我的背包</div>
				</a>
				<div class="shopper_most">
					<img src="../images/top.png" alt="">
				</div>
			</div>
		</div>
	</div>
<script>
	/* $(".commodity_news_bar_ul li .commodity_news_list_show").click(function () {
		$(".commodity_news_list").show();
		$(".pinglun").hide();
		$(".goods").hide();
		
	}) */
	$(".commodity_news_bar_ul li .pinglun_show").click(function () {
		$(".pinglun").show();
		/* $(".commodity_news_list").hide(); */
		$(".goods").hide();
	})
	$(".commodity_news_bar_ul li .show_more").click(function () {
		$(".pinglun").hide();
		/* $(".commodity_news_list").hide(); */
		$(".goods").show();
	})
</script>
</body></html>